<script setup lang="ts">
import CdlTable from "@/components/table";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {reactive} from "vue";
import type {Project} from "@/interfaces/views/project/project";
import type {State, Request, Query, Mode} from "@/interfaces/components/Page"
import {TableTree} from "@/interfaces/components/Table";
import CdlSearch from "@/components/search";
import {FormTree} from "@/interfaces/components/Form";
import {useRoute, useRouter} from "vue-router";
import {appStore} from "@/store/modules/app";
import {useProjectEndApi} from "@/api/project/project";
import {ElMessageBox} from "element-plus";
import {ElMessage} from "element-plus/es";
import * as events from "events";

const router = useRouter()
const route = useRoute()
const store = appStore()
const request: Request = {
  createdIsNeed: true,
  url: "/project/result"
}

const state = reactive<State<Query<Project>, Project>>({
  queryForm: {
    projectStatus: undefined,
    createTime: undefined,
  },
  dataList: []
})
const{query, added, update, handleSizeChange, handleCurrentChange, loading} = useTablePagingTemplate(request, state)

const tabTree: TableTree<Project> = {
  colRule: [
    {ti: "订单编号", prop: "id", width: 175},
    {ti: "托运人", prop: "name", width: 200, tooltip: true},
    {ti: "项目类型", prop: "typeId", dict: "project_type"},
    {ti: "货物种类", prop: "payMode", dict: "payment_method"},
    {ti: "施用总量", prop: "shipperName", tooltip: true},
    {ti: "单次施用量", prop: "managerName"},
    {ti: "施用频次", prop: "projectStatus", dict: "project_state", width: 110},
    {ti: "施用效果", prop: "loadingAddress", width: 200, tooltip: true},
    {ti: "审核时间", prop: "unloadingAddress", width: 200, tooltip: true},
    {ti: "图片", prop: "taskNumber"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: jumpProjectDetail, auth: "project:project:info",
      pretreatment: (data)=> data.projectStatus !== 1}
  ]
}

const searTree: FormTree<Project> = [
  [
    {component: "input", prop: "name", label: "订单名称"},
    {component: "input", prop: "managerId", label: "订单负责人"},
  ]
]

/**
 * 跳转项目详情
 * @param id
 */
function jumpProjectDetail(id: number | string){
  router.push({
    path: "/projectManage/project/projectList/projectDetails",
    query:{
      id: id
    }
  })
}

/**
 * 跳转新建任务
 */
function jumpCreateTask(data: Project){
  const { id, cargoName, cargoTypeId } = data
  router.push({
    path: "/projectManage/task/createAndModifyTask",
    query: {
      projectId: id,
      cargoName,
      cargoTypeId
    }
  })
}

/**
 * 跳转新建项目
 */
function jumpProjectInsert(id: string | undefined = undefined){
  router.push({
    path: "/projectManage/project/projectList/createAndModifyProject",
    query: {
      id: id,
      emit: 1
    }
  })
}
function taskEndHandle(id: string){
  ElMessageBox.confirm(
      '请确认该订单下关联的所有任务已全部结算，否则将不成功！请确认以继续?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    useProjectEndApi(id).then(res =>{
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}

/**
 * 回调处理
 * @param mode
 * @param val
 */
function popupCallBack(mode: Mode, val?: any){
  switch (mode){
    case "add":
      added(val)
      break
    case "update":
      update(val)
      break
    case "search":
      if(val.createDateRange) {
        val.st = val.createDateRange[0]
        val.et = val.createDateRange[1]
        delete val.createDateRange
      }
      query(val)
      break
    case "resetting":
      query()
      break
  }
}

</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree" @submit="popupCallBack">
      <template #menu>
        <el-button @click="()=> jumpProjectInsert()" type="primary" v-auth="'project:project:save'">创建订单</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tabTree" :data="state.dataList" :control-width="100" :loading="loading" controlFixed></CdlTable>
    <el-pagination
        :current-page="state.page"
        :page-sizes="state.pageSizes!"
        :page-size="state.limit"
        :total="state.total"
        hide-on-single-page
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
</template>
